oleeskild/obsidian-digital-garden

實做

安裝步驟

大致照 Initial Setup，但注意：

1. GitHub 帳戶：同
2. Vercel 帳戶：新建的時候會問說要把 Vercel 安裝在哪個 GitHub repo，我就先建一個空的然後弄進去
   e.g. digital-garden
3. 但是要把 oleeskild/digitalgarden 這個 repo Deploy 到 Vercel 時，又是要新建一個不同的 repo，而且這個 repo 的名稱就會影響到 Digital Garden 網域名稱的樣子
   結果我的就變成 https://my-digital-garden-xi.vercel.app/ 了
4. 取得 token，可設為 No expiration，其他設定不用改
   → Generate
5. 安裝 Digital Garden，然後設定，貼入 token
6. 新增個頁面，裡面要有 dg-home 及 dg-publish 兩個 front matter
7. Command Palette Publish Single Note ✅（我的 Gmail 還會收到更新通知 😆）
8. 成功了，Vercel 網站上看到推送上去的頁面了！

後續建構

• 原來網站名稱是在 plugin 設定裡處理
• 其他頁面元素也都可以輕鬆打開 👍
• 細細研究 Digital Garden Docs 吧
• 內容的更新、設定的異動，都會用 GitHub commit 追蹤
  e.g. Commits · GJRobert/my-digital-garden
• 它底層的技術是 11ty/eleventy， 所以可能可以研究相關文件來自訂

正式建站

1. 資訊與網路的恩典 ☞ 正式進行#建正式的 DG
2. Aiuanyu 愛灣語：臺灣本土語文創生：第 2 次了，把 SOP 整理到一 vault 多 DG

• 多 vault 則無法 publish 到同一 DG

觀感

• 似乎比 Mixa 強多

  • Ob 內左邊欄還有一個 Digital Garden Publish Center，真猛

• 網站上一開始的頁面是最陽春的，什麼附加功能都沒有

• 但什麼都可以新增

• 太好了，transclude 的頁面內容都順利呈現！比 Mixa 強多了

• 不過網站名稱、CSS 等可能還有得自訂，值得細細研究

• 支援大量 Ob theme 實在太棒，太漂亮了

  • 還吃 Style Settings 設定也太猛，真的是為了 Obsidian 而生
  • 好像沒有吃自訂輔色 ☞ 修改輔色的方法

• ^20230411 哇，GitHub 上，@vercel 還有 @dependabot 會自動把 Digital Garden 上游用到的套件更新 deploy 過來

  Example

  Bump @11ty/eleventy from 2.0.0 to 2.0.1 by dependabot[bot] · Pull Request #3 · GJRobert/imazingrace 還有 #4、5、6

  這樣不錯耶，底層技術可以保持更新

  • 不過這些 pull request 通通都要手動 merge ∴如果擁有的 DG 越多，就通通都要去做……

• 因為已經成功建立 3 個 DG 了，所以我捐了 USD 5 給作者 Ole 買咖啡 😆

• 20230508 很棒耶，如果被 transclude 的筆記本身沒有 publish 但有變更的話，transclude 的筆記一樣會被偵測到有變更 👍

• 20230801 可惜 SEO 不知道是不是不夠好，我的 Aiunayu 提交 sitemap.xml 1、2 個月了，Google 都不太想來索引 😤 手動要求索引還會說超過單日配額

  • 20230817 太可笑了，現在真的就是每天手動要求索引 1 頁這樣子，勉強可以進行 😐
  • 20240831 感謝　神，後來有買一個 aiuanyu.net 網域，這個 sitemap 好很多，100 多個網頁逐漸有索引到一半了……
  • 咦，dg-hide 的頁面也被 Google 爬了？！怎麼爬到的啊

Tip

• 官方討論區：oleeskild/obsidian-digital-garden · Discussions · GitHub

• 最好一開始就用 Linter + created、updated
• 批次加入 dg-publish ☞

• blog 功能 XD #勉強解決
  → 想到找個能自動產生最近更新檔案列表的 plugin ☞ Vault Changelog ← 不過問題是它無法被 dg-publish，因為它的 front matter 都會被覆寫 XD

  • 哇！還好可以開一個頁面叫 blog，transclude changelog 的內容，然後 publish 上 Digital Garden，可以耶！😢 這樣勉強算有個簡單的最新 log 了！
  • ^20230408 更新的方法：用 Dataview！

• 自訂輔色：修改 DG repo 的 src/site/styles/custom-style.scss，在 body 中加入

  /* Accent HSL values */
  --accent-h: xxx;
  --accent-s: yy%;
  --accent-l: zz%;
  

  儲存（commit），然後 Vercel 就會自動 build……voilà！輔色就出現了！

• 要修改字型也都是到 src/site/styles/custom-style.scss 去 commit

• 自訂 Open Graph 標題、圖片（og:image）等：要設定的 front matter 與 HackMD 不同

  • dg-metatags:
     "og:image": "<url>"
     description: ...
    

  • 測試需不需要加 " ← 都不加也可以！！！試過了，tag 跟 value 都可以不加的樣子

• 自訂頁面標題，例如每頁加上網站名稱 #待研究

  • 問：How to customize page titles?
  • 目前編輯 repo 裡的 ./src/site/_includes/layouts/note.njk 的 <title> 是有效的，但就怕 DG 更新時會影響到
  • index.njk 好像是站台首頁，可能不需要改，因為通常我的首頁名稱本身就會與站台相關了
  • ^20230421 看來其實好好研究這裡的就知道要修改哪裡了：Adding custom components
  • 👆 結果看了以後發現，網頁的 <title> 似乎還是只能修改 layouts 裡面耶！
    • 我有發問了但沒有回音 😢

• 2.43.0 的 dg-pinned 可以：

  • 讓首頁在側邊欄樹狀架構中置頂
  • 讓資料夾內的重要筆記置頂

• ^20230421 給每頁預設的 og:image！
  ☞ topobon/002-og-image.njk at main · uroybd/topobon · GitHub
  { #44051a}

  • 可能蠻需要的，因為發現 DG 的

- ^20230502 今天早晨成功用在 Aiuanyu 了 ♥
- 圖片要放在 src/site/image 裡
- 我放的是 .png，所以就把 002-og-image.njk 修改一下就好
- 先這樣，至於 note icon 的部分之後再試
- 不妨礙個別筆記裡設定 dg-metatags 裡的 og:image ✅
- [ ] 若個別筆記沒設定 og:image，而是有插圖，這樣會抓到插圖還是預設 cover？
👆哇不行，插圖就抓不到了，看來插圖的順位低於 og:image tag
- 然後 How to make Twitter preview your website links | by Dino Costa | Medium 這邊學到了！原來要讓 Twitter 有 preview 的話是要這些 meta tag：
- twitter:card — "summary"、summary_large_image
- twitter:title
- twitter:site
- twitter:description
- twitter:image
- 另參考 Getting started with Cards | Docs | Twitter Developer Platform，原來 site、creator 是可以設定 Twitter ID 的
- 20230517 今天再嘗試建立 src/site/_includes/components/user/common/head/twitter-card.njk 設定 card、site、creator，但發現重點是要有 title → 總算成功了
- twitter:image 可以不用設定，直接用 og:image 就好
- 把 card 的 summary 設為 fallback，這樣可以有 summary_large_image 時就會優先
- 弄到 ImazinGrace 去，但不小心弄成 Aiuanyu 的 cover.png……造成 Twitter 部分 cache 遲遲無法更新 ∴這部分以後盡量一次就做對，不要搞錯
- 那如果真的要再換 cover.png 怎麼辦？也許就連檔名一起換掉、.njk 裡的設定一起改掉好了？

• 小心 Obsidian Git 可能不要切換 branch 免得洗掉頁面的 creation date、modification date ☞ 試用#^git-dont-branch

  • 是可以修改檔案日期時間不過一個個用 GitHub 查 history 或是趁 DG 還沒有更新時找舊的日期時間去改也是有點累～😅

• 每頁的 Disqus 討論區 ✅ ☞ topobon/001-comment.njk at main · uroybd/topobon · GitHub

• 修改 404 頁面 ✅ ☞ src/site/404.njk

• 安裝「豆腐烏」網頁字型服務：

  1. 把 CSS <link> 放到src/site/_includes/components/user/common/head/tauhuoo.njk 中
  2. 在 src/site/styles/custom-style.scss 中視需要在 font-family 中加入 tauhu-oo 字型
  3. 如果 DG 所用的字型有透過 Style Settings 來設定，那就也要把 tauhu-oo 加入，再透過 DG plugin 推送上去

• Google Search Console 的 sitemap.xml ✅

  • 我用的方法是一般資源，因為 Digital Garden 動不到 Vercel 的 DNS，應該是無法用網域資源
  • 驗證方法是把相關程式碼加到 <head> 中（用在 src/site/_includes/components/user/common/head 的一個 .njk 中）

• 20230811 今天更新到 2.45.1 了（IMA 還沒），可以使用自訂的 frontmatter cssclasses 來對應 Obs 內建功能了

• 20240216 Meta 集團在 #FIXME 把 aiuanyu.vercel.app 封掉，超讓人生氣的

  • 之前用 WordPress 免費網域重新導向過去 → 失敗 😤
  • 今天注意到，Vercel 設定區可以新增網域！但需要能驗證或修改 DNS A record
    → 找 free domain name 找到 IONOS 這個郵件服務，每月 USD 1 就有一個免費網域
    → 申請了 aiuanyu.net（刷卡結帳後要等一小陣子，這個網域才會出現），餵給 Vercel，Vercel 會說需要什麼 A record 的值 → 成功了！
    • 用 FB 的分享偵錯工具測試也不會被擋，只差在 og:image 之類的值若有用到被擋的網域的話還是不會載入這樣子

Todo

• 有 RSS 嗎？
  哇有耶 ☞ Features，要設定 base URL
  • e.g. https://my-digital-garden-xi.vercel.app/feed.xml
  • 不確定能否被瀏覽器偵測到 ∵近幾年瀏覽器不太重視 RSS 💔
• 🔵 aliases 有用無？ #待研究

問題

• MD 連結裡的 #... 被誤轉為 tag #bug

• <style> CSS 裡的 #... 被誤轉為 tag #bug

• transclude 似乎會 break list #bug

• 無法搜尋非 ANSI 文字 #bug
  20230527 修好了！！！Search only in English? · oleeskild/obsidian-digital-garden · Discussion #312

• 列印網頁似乎是全空白 😳 #bug

• front matter 裡的 dg-meta-tags 無效 #bug GitHub 上已有人反映
  { #d76f5f}

  • ^20230502 不死心，今晨弄完預設 og:image 以後，試著改成 dg-metatags → OMG 😮 可以了耶！！！

• 設定 dg-permalink 以後沒有 redirect #bug

• 可惜還不支援 Icon Shortcode 這個 plugin 產生的圖示
  👆感謝　神，後來我直接用開發者工具挖出圖示的 HTML 碼，這樣用在文件中，上傳到 DG 就能順利 build 出圖示了！♥ ☞ Icon Shortcodes 測試

  • 20240930 去年起 Threads 很風行，但看了一下沒有這個 icon，而 Icon Shortcode 也很久沒更新了，殘念

• ❌ 支援 Custom Classes 嗎？ #待研究

  • 後來是用自訂 callout（就會有 div class！）+ CSS 達成！

• 20230817 最近幾次 IMA publish deployment 都失敗，主要都是 invalid time value

  1. 先試著更新 digitalgarden-ima，不知道是不是因為忘了更新 plugin？目前仍是 2.43.1（digitalgarden AIU 則已更新到 2.45.2）。經過兩次手動 merge + 1 次修改共 3 個 commit → 更新回 .obsidian 中
  2. ↑還是 deploy 失敗！
  3. 試試 Update site template、Create PR → deploy 也失敗！
  4. 一 vault 多 DG 這頁編譯異常，但 unpublish 這頁還是一樣
  5. 來 merge 幾個 6 月時的 PR，deploy 還是會報錯
  6. 比較 imazingrace/.eleventy.js at main · GJRobert/imazingrace 和 aiuanyu/.eleventy.js at main · GJRobert/aiuanyu，第 464 行以後一樣都是return new Date(date).toISOString("dd-MM-yyyyTHH:mm:ssZ"); 為什麼 imazingrace 這邊每次部署都出錯呢？
  7. 搜尋了整個 vault，Linter timestamp 用到 yyyy/mm/dd H:mm:ss 舊格式的都不是有 publish 的筆記啊，到底為什麼 invalid time value 啊 😞
  8. 下一步：把所有的 ima-publish 筆記都先變 false unpublish 看還有沒有問題
     👆正常
     • 55 份筆記有 55 個 delete commit，有的還是 invalid time value fail，有的則是說 commit canceled 因為同個 branch 還有後續 commit，但都混在一起，看不出病因 🙃
  9. 然後 publish 幾篇看還有沒有問題
     1. 💻 ImazinGrace 資訊與網路的恩典 ✅
     2. 一 vault 多 DG：publish 這個的時候會跳出說無法處理 inline dataview query，叫我更新到最新的 Dataview
        • deploy ✅
        • 但內容是殘的
        • → Dataview 0.5.55 → 0.5.56 ← ❌
        • 問題出在前兩天寫的英文內容 ∴先切出去再重 publish ✅
        • 所以 Invalid time value 的病因還沒找到～
        • 把英文內容裡面的 == 都先改為 ** → 這個 publish 正常了
     3. 弄了 5 個 ✅
  10. 再來也是一次 5 篇，比較省 deployment 數（由 ima-publish: false 然後由最早建立的開始放）
      1. 第 6 篇弄到 Obsidian 試用時竟然就發現日期格式錯誤了！改好了再 deploy 就正常了！！！😮
      2. 後來開始一批 10 篇
      3. 弄到這裡以後的都超出今天 100 次 deploy 限制 🤦🏼‍♀️：3cfd8c4
  11. 20230822 真令人生氣，前 3 天還正常的，昨天 DG 自己 bump 兩個 commit 又開始 Invalid time value 了，現在 publish 隨便一篇又都不行了 😡
      1. 咦剛發現語法這篇也有日期格式錯誤 ← 修好了！感謝　神。真奇怪為什麼之前一批 10 篇那時候沒發現？
  12. 20230822 今天似乎終於都修好了，呼。

1. 20230907 試著換成 Typomagical 主題，但 heading 顏色出不來、一些本機字型 CSS 設定也沒套上去（即使已有用 Style Settings）∴先換回 AnupPucin
2. 20240813 今天突然字型都變 '??' 是怎樣？？？
   ↑後來在 GitHub 直接改 custom.scss 修好

20240831 最近幾次 IMA deployment 又都失敗，從今年 2/7 早上 build 一次就失敗，也是 Invalid time value。

• 去年 8/22 修好的那次，秒數後面沒有 .xxx 似乎沒關係不是嗎？
• 先找看看 ima-publish: true 的裡面有沒有 created: 或 updated: 怪的，目前看到秒數後面沒有小數位數的其實很多啊，為什麼之前都沒問題？
• 試著把 2/7 那個 build 的 💻 ImazinGrace 資訊與網路的恩典取消 publish 再 build → 還是 fail，不是它的問題
• 再來是拿掉 Facebook 的爛 → fail
• 喔！從 imazingrace GitHub 2/7 commits可以看到更多 2/7 當天更新的檔案！來檢查它們的 time 格式
  • 喔，LEGO 21327 打字機 的 updated 就多了一個 0 了，不知是不是 Linter 造成的
  • 這批的其他檔案沒問題
  • LEGO 21327 打字機這篇的 updated 還多了幾個數字 🤦‍♂️ 所以多修了一次再 deploy 總算 build 成功啦！感謝　神！

參考

他人成品：

• The Threshold

其他

• 什麼是「digital garden」？